<template>
    <div>
        <div>
            <nav-bar title="钱包" :show-back="true"/>
        </div>
        <div class="top">
            <div class="top_head">钱包余额(元)</div>
            <div class="top_content">200.00</div>
        </div>
        <div>
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item class="item" @click.native="routerJump('/recharge')">
                    <img src="../../img/color_recharge.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">充值</span>
                    <div class="next_div">
                        <img src="../../img/next.png" class="next">
                    </div>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
        <div>
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item class="item">
                    <img src="../../img/card.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">绑定银行卡</span>
                    <div class="next_div">
                        <img src="../../img/next.png" class="next">
                    </div>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'Wallet',
    components: {
        NavBar
    },
    methods: {
        // 路由跳转
        routerJump (path) {
            this.$router.push(path)
        }
    }
}
</script>
<style scoped>
.top{background-color: #00B2EE; height: 2.2rem; width: 100%;}
.top_head{color: rgb(241, 241, 241); font-size: 120%; margin-left: 9%; padding-top: .2rem;}
.top_content{color: #fff; font-size: 270%; margin-left: 9%; padding-top: .2rem;}
.text{position: relative; bottom:.15rem; left: .2rem; font-size: .3rem;}
.next_div{float: right; margin-top: 2%; margin-right: 5%;}
.next{width: .4rem; height: .4rem;}
.line { height: 1px; border-top: 1px solid rgb(235, 234, 234); text-align: center; }
</style>
